import {
  createRouter,
  createWebHistory,
} from "vue-router";

// 异步加载路由的写法
const indexmoblie = () => import('@/pages/index.vue')
const citymoblie = () => import("@/pagess/city.vue")
const loginmoblie = () => import('@/pagess/login.vue')
const carmoblie = () => import("@/pagess/cart.vue")
const register = () => import('@/pagess/register.vue')
const shopDeteil = () => import("@/pagess/shopDeteil.vue")
const notfund = () => import("@/pagess/notfund.vue")

const router = createRouter({
  // 使用 hash模式 还是 history模式
  history: createWebHistory(),

  routes: [
    {
      path: "/",
      redirect: "/index",
    },
    {
      path: "/index",
      component: indexmoblie,
    },
    {
      path: "/city",
      component: citymoblie,
    },
    {
      path: "/login",
      component: loginmoblie,
    },
    {
      path: "/car",
      component: carmoblie,
    },
    {
      path: "/register",
      component: register,
    },
    {
      path: "/detail/:id",
      component: shopDeteil,
    },
    // 这种是动态路由的写法。输入任意的参数直接重定向到其他的页面
    {
      path: "/notfund",
      component: notfund,
    },
    // 还有一种是动态路由的写法
    {
      path: "/:path",
      redirect: "/notfund",
    },
  ],
});
// 访问不存在的页面直接跳转到404页面的写法
// router.beforeEach((to, from) => {
//   if (to.matched.length === 0) {
//     return '/notfund'
//   }
// })
export default router;
